<template>
  <div class="divBox customerBtn">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item> 账号： </el-form-item>
        <el-form-item>
          <el-input
            v-model="userName"
            placeholder=""
            clearable
            class="selWidth"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="getTableData" type="primary" icon="el-icon-search"
            >查询</el-button
          >
          <!-- <el-button size="mini" type="primary" @click.native="handleGetRoleList">查询</el-button> -->
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table border
        :data="listData"
        size="mini"
        :header-cell-style="{
          fontWeight: 'bold',
          background: '#f8f8f9',
          color: '#515a6e',
          height: '40px',
        }"
      >
        <el-table-column label="账号/用户名" prop="userName"></el-table-column>
        <el-table-column label="用户净值" prop="netWorth"></el-table-column>
        <el-table-column label="总收益"
          ><template slot-scope="scope"
            ><span style="color: rgb(61, 157, 61)">{{
              scope.row.totalRevenue
            }}</span></template
          ></el-table-column
        >
        <el-table-column label="最大回撤" prop="returnRate"></el-table-column>
        <el-table-column label="交易胜率" prop="winRate"></el-table-column>
        <el-table-column
          label="交易周期"
          prop="uniqueTradeDays"
          min-width="130"
        />
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="goTo(scope.row)"
              v-hasPermi="['admin:trainerAnalyze:detail']"
              >统计分析<i class="el-icon-upload el-icon--right"></i
            ></el-button>
            <!-- <el-button type="primary">行为分析</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />
    </el-card>
  </div>
</template>

<script>
import * as trainerAnalyze from "@/api/trainerAnalyze";
import { checkPermi } from "@/utils/permission"; // 权限判断函数
export default {
  data() {
    return {
      // constants: this.$constants,
      listData: [], //表格数据
      userName: "", //搜索文字
      currentPage: 1,
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    checkPermi,
    goTo(data) {
      this.$router.push({
        path: "/trainerAnalyze/detail", //跳转路径
        query: { uid: data.uid, traderAccountId: data.traderAccountId },
      });
    },

    getTableData() {
      let data = {
        page: this.currentPage,
        limit: this.pageSize,
        userName: this.userName,
      };
      trainerAnalyze
        .getTraderAnalysisList(data)
        .then((res) => {
          console.log('分析列表数据：',res);
          this.listData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    resetQuery() {
      this.userName = "";
      this.getTableData();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    pageChange(page) {
      this.currentPage = page;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.customerBtn {
  .el-button--primary:not(.is-disabled) {
    background-color: #1890ff;
    border-color: #1890ff;

    &:hover {
      &:not(.is-disabled) {
        opacity: 0.8;
      }

      &:active {
        opacity: 1;
      }
    }
  }
}
</style>
